<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta charset="UTF-8">
    <title>科研成果统计</title>
    <link rel="stylesheet" type="text/css" href="../easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="../easyui/themes/icon.css">
    <link rel="stylesheet" type="text/css" href="../easyui/css/demo.css">
    <script type="text/javascript" src="../easyui/jquery.min.js"></script>
    <script type="text/javascript" src="../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../easyui/js/validateExtends.js"></script>
    <script type="text/javascript">
        var projectList = ${projectListJson};
        $(function() {
            var table;

            //搜索按钮
            $("#search-btn").click(function(){
                var projectid=$("#search-project-id").combobox('getValue');
                $.ajax({
                    type: "post",
                    url:"get_statslist?projectid="+projectid,
                    data:projectid,
                    dataType:'json',
                    success:function(data){
                        if(data.type == "suceess"){
                            var option = {
                                title: {
                                    text: data.projectname+'的成果统计'
                                },
                                tooltip: {
                                    trigger: 'axis',
                                    axisPointer: {
                                        type: 'cross',
                                        crossStyle: {
                                            color: '#999'
                                        }
                                    }
                                },
                                xAxis: {
                                    data: data.rangeList
                                },
                                yAxis: {type:'value'},
                                series: [{
                                    name: '次数',
                                    type: 'bar',
                                    data: data.numberList
                                }]
                            };
                            showCharts(option);
                        }
                        else{
                            $.messager.alert("消息提醒","获取数据出错!","info");
                        }

                    }
                })


            });
        });
    </script>
</head>
<body style="padding:0px;">
<div class="panel-header"><div class="panel-title panel-with-icon">成果统计</div><div class="panel-icon icon-more"></div><div class="panel-tool"></div></div>
<!-- 工具栏 -->
<div id="toolbar" class="datagrid-toolbar">
    <div>
            项目名称：
            <select id="search-project-id" class="easyui-combobox" style="width: 150px;">
                <option value=""></option>
                <c:forEach items="${ projectList}" var="project">
                    <option value="${project.id }">${project.name }</option>
                </c:forEach>
            </select>
            <a id="search-btn" href="javascript:;" class="easyui-linkbutton" data-options="iconCls:'icon-sum',plain:true">成果统计</a>
    </div>
</div>
<div id="charts-div" style="width:100%;height:500px;"></div>
</body>
<script type="text/javascript" src="../easyui/js/echarts.common.min.js"></script>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('charts-div'));

    function showCharts(option){
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    }



</script>
</html>